<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/static/css/common.css">
        <link rel="stylesheet" href="/static/css/archive.css">
        <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
        <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
        <title>归档文章</title>
    </head>

    <body>
        <!-- 移动端菜单栏 -->
        <div class="mobile-menu">
            <span class="mobile-menu-icon">
                <i class="layui-icon layui-icon-menu-fill"></i>
            </span>
            <div class="mobile-menu-content">
                <p>
                    <a href="/">首页</a>
                </p>
                <p>
                    <a href="/">归档</a>
                </p>
                <p>
                    <a href="/">关于</a>
                </p>
                <p>
                    <a target="_blank" href="https://www.ghxi.com/">资源</a>
                </p>
            </div>
        </div>


        <div class="container">
            <!-- 左侧菜单栏 -->
            <div class="side-bar">
                <!-- logo -->
                <div class="logo-wrapper">
                    <img src="/static/img/logo.png" alt="听雨" onclick="window.location.href='/';" />
                    <h1>听雨</h1>
                </div>
                <!-- 联系方式 -->
                <div class="contact-wrapper">
                    <span class="contact-email">
                        <img src="/static/img/email.svg" alt="1186472484@qq.com" />
                    </span>
                    <span class="contact-gitee">
                        <img src="/static/img/gitee.svg" alt="https://gitee.com/yuguofu/" href="https://gitee.com/yuguofu/"
                            onclick="window.open(this.getAttribute('href'));" />
                    </span>
                </div>
                <!-- 导航链接 -->
                <div class="navlink">
                    <ul class="navlist">
                        <li>
                            <a href="/">首页</a>
                        </li>
                        <li>
                            <a href="/archive">归档</a>
                        </li>
                        <li>
                            <a href="/about">关于</a>
                        </li>
                        <li>
                            <a target="_blank" href="https://www.ghxi.com/">资源</a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 归档 -->
            <div class="archive-wrapper">
                <blockquote class="layui-elem-quote">
                    <h2>归档文章</h2>
                </blockquote>

                <div class="archive-main">

                    <div class="layui-timeline">

                        @zig {
                            if (zmpl.get("archives")) |archives| {
                                for (archives.items(.array)) |archive| {
                                    const year = archive.get("year");
                                    const articles = archive.get("articles");

                                    <div class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis"></i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">{{year}}</h3>
                                            <ul>

                                                if(articles) |arts| {
                                                    for (arts.*.items(.array)) |art| {
                                                        const id = art.get("id");
                                                        const title = art.get("title");
                                                        // const cate_name = art.get("cate_name");
                                                        const created_at = art.get("created_at");

                                                        <li class="archive-li">
                                                            <span>{{created_at}}</span>
                                                            <a href="/article/{{id}}">{{title}}</a>
                                                        </li>
                                                    }

                                                }



                                            </ul>
                                        </div>
                                    </div>

                                }
                            }
                        }


                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title"></div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

        </div>


    </body>

</html>